<template>
  <view class="container">
    <!-- 顶部作者信息 -->
    <view class="author-info">
      <image class="avatar" src="/static/shouye1.png"></image>
      <text class="author-name">郑都</text>
    </view>
    
    <!-- 顶部图片 -->
    <image class="header-image" src="/static/shouye1.png" mode="widthFix"></image>
    
    <!-- 主要内容 -->
    <view class="content">
      <view class="section">
        <text class="title">领略中文之美</text>
      </view>
      
      <view class="section">
        <text class="subtitle">鄭都的正确读音？</text>
        <view class="pronunciation">
          <text class="highlight">鄭都</text>
          <text> — fēng dū</text>
        </view>
        <view class="definition">
          <text class="bold">词语释义：</text>
          <text>地名，在重庆。今作丰都。</text>
        </view>
        <view class="example">
          <text class="bold">例句：</text>
          <text>夜幕降临，她颤巍巍地冲进梦，感受着这座城市的神秘与古老。</text>
        </view>
      </view>
      
      <!-- 评论区 -->
      <view class="comments-section">
        <text class="comments-title">共{{comments.length}}条评论</text>
        <text class="comments-subtitle">爱评论的人运气都不差</text>
         <!-- 顶部固定输入框 -->
          <view class="top-comment-input">
            <image class="input-avatar" src="/static/shouye1.png"></image>
            <input 
              class="comment-input" 
              placeholder="写下你的评论..." 
              v-model="newTopComment" 
              @confirm="postTopComment"
            />
            <button 
              class="submit-btn" 
              @click="postTopComment" 
              :disabled="!newTopComment.trim()"
            >发表</button>
          </view>
        <view class="comments-list">
          <view v-for="(comment, index) in comments" :key="index" class="comment-item">
            <view class="comment-header">
              <image class="comment-avatar" :src="comment.avatar"></image>
              <text class="comment-author">{{comment.author}}</text>
              <text class="comment-time">{{comment.time}}</text>
            </view>
            <view class="comment-content">{{comment.content}}</view>
            <view class="comment-actions">
              <view class="like-action" @click="toggleLike(comment)">
                <image class="like-icon" :src="comment.liked ? '/static/liked.png' : '/static/like.png'"></image>
                <text class="like-count">{{comment.likes}}</text>
              </view>
              <text class="reply-action" @click="showReply(comment)">回复</text>
            </view>
            
            <!-- 回复内容 -->
            <view v-if="comment.replies && comment.replies.length > 0" class="replies">
              <view v-for="(reply, rIndex) in comment.replies.slice(0, comment.showAllReplies ? comment.replies.length : 1)" 
                    :key="rIndex" class="reply-item">
                <view class="reply-header">
                  <image class="reply-avatar" :src="reply.avatar"></image>
                  <text class="reply-author">{{reply.author}}</text>
                  <text class="reply-time">{{reply.time}}</text>
                </view>
                <view class="reply-content">{{reply.content}}</view>
                <!-- 回复的操作按钮 -->
                <view class="reply-actions">
                  <view class="like-action" @click="toggleReplyLike(reply, comment)">
                    <image class="like-icon" :src="reply.liked ? '/static/liked.png' : '/static/like.png'"></image>
                    <text class="like-count">{{reply.likes || 0}}</text>
                  </view>
                  <text class="reply-action" @click="showReply(reply, comment)">回复</text>
                </view>
              </view>
              
              <view v-if="comment.replies.length > 1 && !comment.showAllReplies" 
                    class="show-more-replies" @click="toggleReplies(comment)">
                展开{{comment.replies.length - 1}}条回复
              </view>
              <view v-else-if="comment.replies.length > 1 && comment.showAllReplies" 
                    class="show-more-replies" @click="toggleReplies(comment)">
                收起回复
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部输入框 -->
  <!-- 底部输入框 -->
  <view class="input-container">
    <view v-if="replyingTo" class="replying-to-hint">
      {{isReplyingToReply ? '回复：' + replyingTo.author : '发表评论'}}
      <text class="cancel-reply" @click="cancelReply">取消</text>
    </view>
    <view class="input-row">
      <input 
        class="comment-input" 
        :placeholder="replyingTo ? (isReplyingToReply ? '回复' + replyingTo.author : '写下你的评论...') : '写下你的评论...'" 
        v-model="newComment" 
        @confirm="postComment"
        :focus="replyingTo !== null"
      >
      <button class="send-button" @click="postComment">发送</button>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		 newTopComment: '', // 顶部输入框内容
      newComment: '',
      replyingTo: null,      // 当前正在回复的对象
      replyingComment: null, // 当前正在回复的父级评论
      comments: [
        {
          id: 1,
          author: '宿豫洲',
          avatar: '/static/shouye1.png',
          content: '郦都。我以前看过的那个小说，又是罗耶山鬼王，然后就认识这个字了。',
          time: '06-03 山东',
          likes: 12,
          liked: false,
          replies: [
            {
              id: 11,
              author: '南知',
              avatar: '/static/shouye1.png',
              content: '不会是大撞阴阳路吧😊',
              time: '06-04 山东',
              likes: 3,
              liked: false
            },
            {
              id: 12,
              author: '南知',
              avatar: '/static/shouye1.png',
              content: '我也看过这本小说',
              time: '06-04 山东',
              likes: 1,
              liked: false
            }
          ],
          showAllReplies: false
        },
        {
          id: 2,
          author: '小红薯6670B665',
          avatar: '/static/shouye1.png',
          content: '地府鬼城叫什么来着？',
          time: '05-19 浙江',
          likes: 5,
          liked: false,
          replies: [],
          showAllReplies: false
        },
        {
          id: 3,
          author: '军哥哥',
          avatar: '/static/shouye1.png',
          content: '郦lfēnglǒng',
          time: '05-19 湖南',
          likes: 3,
          liked: false,
          replies: [],
          showAllReplies: false
        }
      ]
    }
  },
  computed: {
    // 判断是否正在回复一个回复（而非主评论）
    isReplyingToReply() {
      return this.replyingTo && this.replyingComment && this.replyingComment !== this.replyingTo;
    }
  },
  methods: {
	    // 顶部输入框提交
	    postTopComment() {
	      if (!this.newTopComment.trim()) return;
	      
	      const newComment = {
	        id: Date.now(),
	        author: '当前用户',
	        avatar: '/static/shouye1.png',
	        content: this.newTopComment,
	        time: this.formatDate(new Date()),
	        likes: 0,
	        liked: false,
	        replies: [],
	        showAllReplies: false
	      };
	      
	      this.comments.unshift(newComment);
	      this.newTopComment = '';
	    },
    // 点赞主评论
    toggleLike(comment) {
      comment.liked = !comment.liked;
      comment.likes += comment.liked ? 1 : -1;
    },
    
    // 点赞回复
    toggleReplyLike(reply, parentComment) {
      reply.liked = !reply.liked;
      reply.likes = (reply.likes || 0) + (reply.liked ? 1 : -1);
      this.$set(parentComment.replies, parentComment.replies.indexOf(reply), reply);
    },
    
    // 展开/收起回复
    toggleReplies(comment) {
      comment.showAllReplies = !comment.showAllReplies;
    },
    
    // 显示回复输入框
    showReply(target, parentComment = null) {
      this.replyingTo = target;
      this.replyingComment = parentComment || target;
      
      // 自动滚动到输入框
      uni.pageScrollTo({
        scrollTop: 99999,
        duration: 300
      });
    },
    
    // 提交评论/回复
    postComment() {
      if (this.newComment.trim() === '') return;
      
      let commentContent = this.newComment;
      
      // 如果是回复
      if (this.replyingTo) {
        // 如果是回复一个回复，添加前缀
        if (this.isReplyingToReply) {
          commentContent = `回复${this.replyingTo.author}：${this.newComment}`;
        }
        
        const newReply = {
          id: Date.now(),
          author: '当前用户',
          avatar: '/static/shouye1.png',
          content: commentContent,
          time: this.formatDate(new Date()),
          likes: 0,
          liked: false
        };
        
        // 确保replies数组存在
        if (!this.replyingComment.replies) {
          this.$set(this.replyingComment, 'replies', []);
        }
        
        // 添加到被回复评论的replies数组中
        this.replyingComment.replies.push(newReply);
        
        // 如果回复的是子评论，确保父评论展开显示所有回复
        if (this.isReplyingToReply) {
          this.replyingComment.showAllReplies = true;
        }
        
        this.cancelReply();
      } else {
        // 发表新评论
        const newComment = {
          id: Date.now(),
          author: '当前用户',
          avatar: '/static/shouye1.png',
          content: commentContent,
          time: this.formatDate(new Date()),
          likes: 0,
          liked: false,
          replies: [],
          showAllReplies: false
        };
        
        this.comments.unshift(newComment);
      }
      
      this.newComment = '';
    },
    
    // 取消回复
    cancelReply() {
      this.replyingTo = null;
      this.replyingComment = null;
    },
    
    // 格式化日期
    formatDate(date) {
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${month}-${day}`;
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 100px;
  background-color: #f8f8f8;
}

/* 作者信息 */
.author-info {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.author-name {
  font-size: 16px;
  font-weight: bold;
}

/* 顶部图片 */
.header-image {
  width: 100%;
  /* border: 1px solid red; */
}

/* 内容区域 */
.content {
  padding: 15px;
}

.section {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.pronunciation {
  margin: 10px 0;
}

.highlight {
  font-weight: bold;
  color: #e74c3c;
}

.bold {
  font-weight: bold;
}

.definition, .example {
  margin: 8px 0;
  line-height: 1.5;
}
/* 顶部评论输入框 */
.top-comment-input {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 20px;
  border: 1px gainsboro solid;
  padding: 8px 15px;
  margin-bottom: 15px;
}

.input-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-input {
  flex: 1;
  height: 40px;
  font-size: 14px;
  color: #333;
  background: transparent;
}

.submit-btn {
  color: #e74c3c;
  font-size: 14px;
  font-weight: bold;
  background: transparent;
  border: none;
  /* padding: 0 0 0 px; */
  margin-left: 5px;
}

.submit-btn[disabled] {
  color: #ccc;
  /* opacity: 0.7; */
}
/* 评论区 */
.comments-section {
  margin-top: 30px;
}

.comments-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.comments-subtitle {
  font-size: 14px;
  color: #999;
  display: block;
  margin-bottom: 15px;
}

.comment-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-author {
  font-weight: bold;
  font-size: 15px;
  margin-right: 10px;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-content {
  margin-bottom: 10px;
  line-height: 1.4;
}

.comment-actions {
  display: flex;
  align-items: center;
}

.comment-actions .like-action {
  display: flex;
  align-items: center;
  margin-right: 15px;
  color: #666;
}

.comment-actions .like-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.comment-actions .reply-action {
  color: #666;
  font-size: 14px;
}

/* 回复列表 */
.replies {
  margin-top: 15px;
  padding-left: 15px;
  border-left: 2px solid #eee;
}

.reply-item {
  margin-bottom: 10px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.reply-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.reply-author {
  font-weight: bold;
  font-size: 14px;
  margin-right: 8px;
}

.reply-time {
  font-size: 12px;
  color: #999;
}

.reply-content {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

/* 回复操作按钮 */
.reply-actions {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.reply-actions .like-action {
  display: flex;
  align-items: center;
  margin-right: 10px;
  color: #666;
}

.reply-actions .like-icon {
  width: 16px;
  height: 16px;
  margin-right: 3px;
}

.reply-actions .like-count {
  font-size: 12px;
}

.reply-actions .reply-action {
  color: #666;
  font-size: 12px;
}

/* 展开/收起回复按钮 */
.show-more-replies {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

/* 底部输入框 */
.input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 15px;
  border-top: 1px solid #eee;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}

.input-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.comment-input {
  flex: 1;
  background-color: #f5f5f5;
  border-radius: 18px;
  padding: 8px 15px;
  font-size: 14px;
  margin-right: 10px;
}

.send-button {
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 18px;
  
  font-size: 14px;
  white-space: nowrap;
}

.replying-to-hint {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.cancel-reply {
  color: #e74c3c;
}
</style>